@import '@/assets/css/public';
.dlq5011IntervalGraph{
	color:#fff;
	.wrapper{
	  .ctn{
			border: 1px solid #e3e5e4;
			height: 900px;
			box-sizing: border-box;
			display: flex;
			& > div + div{
				border-left: 1px solid #e3e5e4;
				box-sizing: border-box;
			}
			.one{
				flex:1.3;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				& > div + div{
					border-top: 1px solid #e3e5e4;
					box-sizing: border-box;
				}
				.YYBXH{
					flex:2;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					.topTitle{
						height: 40px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-bottom: 1px solid #e3e5e4;
						box-sizing: border-box;
						& > p{
							font-size: 16px;
						}
					}
					.YYBXH-wrapper{
						flex:1;
						overflow: hidden;
						display: flex;
						.YYBLeft{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							padding: 10px;
							box-sizing: border-box;
							.YYBLeft_top{
								flex:1;
								overflow: hidden;
								& > p{
									height: 30px;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 16px;
									margin: 5px 0;
								}
								& > ul{
									display: flex;
									flex-direction: column;
									& > li{
										display: flex;
										align-items: center;
										border: 1px solid #e3e5e4;
										// padding: 2px 0;
										box-sizing: border-box;
										.icon{
											width: 50px;
											height: 38px;
											& > div{
												transform: scale(.7) !important;
												margin-top: -5px;
											}
										}
									}
								}
							}
							.YYBLeft_btm{
								flex:1;
								overflow: hidden;
								& > p{
									height: 30px;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 16px;
									margin: 5px 0;
								}
								& > ul{
									display: flex;
									flex-direction: column;
									& > li{
										display: flex;
										align-items: center;
										border: 1px solid #e3e5e4;
										// padding: 2px 0;
										box-sizing: border-box;
										.icon{
											width: 50px;
											height: 38px;
											& > div{
												transform: scale(.7) !important;
												margin-top: -5px;
											}
										}
									}
								}
							}
						}
						.YYBRight{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							padding: 10px;
							box-sizing: border-box;
							.YYBRight_top{
								flex:1;
								overflow: hidden;
								& > p{
									height: 30px;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 16px;
									margin: 5px 0;
								}
								& > ul{
									display: flex;
									flex-direction: column;
									& > li{
										display: flex;
										align-items: center;
										border: 1px solid #e3e5e4;
										// padding: 2px 0;
										box-sizing: border-box;
										.icon{
											width: 50px;
											height: 38px;
											& > div{
												transform: scale(.7) !important;
												margin-top: -5px;
											}
										}
									}
								}
							}
							.YYBRight_btm{
								flex:1;
								overflow: hidden;
								& > p{
									height: 30px;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 16px;
									margin: 5px 0;
								}
								& > ul{
									display: flex;
									flex-direction: column;
									& > li{
										display: flex;
										align-items: center;
										border: 1px solid #e3e5e4;
										// padding: 2px 0;
										box-sizing: border-box;
										.icon{
											width: 50px;
											height: 38px;
											& > div{
												transform: scale(.7) !important;
												margin-top: -5px;
											}
										}
									}
								}
							}
						}
					}
				}
				.RYBXH{
					flex:3.5;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					.topTitle{
						height: 40px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-bottom: 1px solid #e3e5e4;
						box-sizing: border-box;
						& > p{
							font-size: 16px;
						}
					}
					.RYBXH-wrapper{
						flex:1;
						overflow: hidden;
						display: flex;
						.RYBLeft{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							& > p{
								height: 40px;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 16px;
							}
							& > ul{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								padding: 0 5px 10px 10px;
								box-sizing: border-box;
								& > li + li{
									margin-top: 5px;
								}
								& > li{
									display: flex;
									align-items: center;
									border: 1px solid #e3e5e4;
									padding: 2px 10px;
									box-sizing: border-box;
									.svgBox{
										width: 60px;
										height: 25px;
										display: flex;
										align-items: center;
										justify-content: center;
										& > svg{
											width: 100%;
											height: 100%;
										}
									}
									& > p{
										flex:1;
										font-size: 14px;
										overflow: hidden;
									}
								}
							}
						}
						.RYBRight{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							& > p{
								height: 40px;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 16px;
							}
							& > ul{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								padding: 0 10px 10px 5px;
								box-sizing: border-box;
								& > li + li{
									margin-top: 5px;
								}
								& > li{
									display: flex;
									align-items: center;
									border: 1px solid #e3e5e4;
									padding: 2px 10px;
									box-sizing: border-box;
									.svgBox{
										width: 60px;
										height: 25px;
										display: flex;
										align-items: center;
										justify-content: center;
										& > svg{
											width: 100%;
											height: 100%;
										}
									}
									& > p{
										flex:1;
										font-size: 14px;
										overflow: hidden;
									}
								}
							}
						}
					}
				}
			}
			.two{
				flex:1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				.topTitle{
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #e3e5e4;
					box-sizing: border-box;
					& > p{
						font-size: 16px;
					}
				}
				.twoWrapper{
					flex:1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					& > div + div{
						border-top: 1px solid #e3e5e4;
						box-sizing: border-box;
					}
					.twoTop{
						display: flex;
						justify-content: space-between;
						padding: 0 10px;
						box-sizing: border-box;
						.item{
							display: flex;
							flex-direction: column;
							align-items: center;
							margin: 40px 0;
							& > p{
								margin-bottom: 15px;
							}
							.inner{
								width: 140px;
								height: 80px;
								border: 2px solid #ff7260;
								display: flex;
								align-items: center;
								.innerLeft{
									border: 1px solid #ff7260;
									flex:1.5;
									overflow: hidden;
									height: 40px;
									margin-left: 5px;
									position: relative;
									& > span{
										display: block;
										font-size: 28px;
										color: #ff7260;
										transform: rotate(45deg);
										position: absolute;
										top:5px;
										left: 10px;
									}
								}
								.innerRight{
									height: 100%;
									flex:2;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									& > p{
										font-size: 12px;
										text-align: right;
										margin: 5px 5px 0 0;
									}
									.AB{
										flex:1;
										overflow: hidden;
										display: flex;
										justify-content: flex-end;
										align-items: flex-end;
										margin: 0 5px 5px 0;
										.A{
											display: flex;
											flex-direction: column;
											align-items: center;
											margin-right: 5px;
											& > p{
												font-size: 12px;
												margin-bottom: 5px;
											}
											.imgBox{
												width: 30px;
												height: 30px;
												& > img{
													width: 100%;
													height: 100%;
												}
											}
										}
										.B{
											display: flex;
											flex-direction: column;
											align-items: center;
											& > p{
												font-size: 12px;
												margin-bottom: 5px;
											}
											.imgBox{
												width: 30px;
												height: 30px;
												& > img{
													width: 100%;
													height: 100%;
												}
											}
										}
									}
								}
							}
						}
					}
					.twoMid{
						display: flex;
						flex-direction: column;
						& > p{
							height: 40px;
							display: flex;
							justify-content: center;
							align-items: center;
							border-bottom: 1px solid #e3e5e4;
							box-sizing: border-box;
							font-size: 16px;
						}
						.twoMid-wrapper{
							flex:1;
							overflow: hidden;
							padding: 20px 0 40px;
							box-sizing: border-box;
							display: flex;
							.twoMidLeft{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								& > p{
									height: 40px;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 16px;
								}
								& > ul{
									width: 100%;
									flex:1;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									align-items: center;
									padding: 0 10px;
									box-sizing: border-box;
									& > li + li{
										margin-top:20px;
									}
									& > li{
										width: 100%;
										padding: 5px;
										box-sizing: border-box;
										display: flex;
										align-items: center;
										border: 1px solid #e3e5e4;
										& > div{
											width: 50px;
											margin: 0 10px 0 5px;
											.el-button{
												width: 100%;
												height: 20px;
												background:#80d2fe;
												border-radius: 0;
												padding: 0;
											}
											& > img{
												width: 100%;
											}
										}
									}
								}
							}
							.twoMidRight{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								& > p{
									height: 40px;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 16px;
								}
								& > ul{
									width: 100%;
									flex:1;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									align-items: center;
									padding: 0 10px;
									box-sizing: border-box;
									& > li + li{
										margin-top:20px;
									}
									& > li{
										width: 100%;
										padding: 5px;
										box-sizing: border-box;
										display: flex;
										align-items: center;
										border: 1px solid #e3e5e4;
										& > div{
											width: 50px;
											margin: 0 10px 0 5px;
											.el-button{
												width: 100%;
												height: 20px;
												background:#80d2fe;
												border-radius: 0;
												padding: 0;
											}
											& > img{
												width: 100%;
											}
										}
									}
								}
							}
						}
					}
					.twoBtm{
						flex:2;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						& > p{
							height: 40px;
							display: flex;
							justify-content: center;
							align-items: center;
							border-bottom: 1px solid #e3e5e4;
							box-sizing: border-box;
							font-size: 16px;
						}
						.twoBtmWrapper{
							flex:1;
							overflow: hidden;
							display: flex;
							.twoBtmWrapper_left{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								padding: 10px;
								box-sizing: border-box;
								& > ul{
									flex:1;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									align-items: center;
									& > li + li{
										margin-top: 2px;
									}
									& > li{
										width: 100%;
										text-align: center;
										// border: 1px solid #e3e5e4;
										// padding: 5px 0;
										box-sizing: border-box;
										& > div{
											padding: 5px;
										}
									}
								}
							}
							.twoBtmWrapper_right{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								padding: 10px;
								box-sizing: border-box;
								& > ul{
									flex:1;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									align-items: center;
									& > li + li{
										margin-top: 2px;
									}
									& > li{
										width: 100%;
										text-align: center;
										// border: 1px solid #e3e5e4;
										// padding: 5px 0;
										box-sizing: border-box;
										& > div{
											padding: 5px;
										}
									}
								}
							}
						}
					}
				}
			}
			.three{
				flex:1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				.topTitle{
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #e3e5e4;
					box-sizing: border-box;
					& > p{
						font-size: 16px;
					}
				}
				.threeWrapper{
					flex:1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					& > div + div{
						border-top: 1px solid #e3e5e4;
						box-sizing: border-box;
					}
					.threeWrapper_top{
						display: flex;
						.threeWrapper_left{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							padding: 10px;
							box-sizing: border-box;
							& > ul{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > li + li{
									margin-top: 2px;
								}
								& > li{
									width: 100%;
									text-align: center;
									// border: 1px solid #e3e5e4;
									// padding: 5px 0;
									box-sizing: border-box;
									& > div{
										padding: 5px;
									}
								}
							}
						}
						.threeWrapper_right{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							padding: 10px;
							box-sizing: border-box;
							& > ul{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > li + li{
									margin-top: 2px;
								}
								& > li{
									width: 100%;
									text-align: center;
									// border: 1px solid #e3e5e4;
									// padding: 5px 0;
									box-sizing: border-box;
									& > div{
										padding: 5px;
									}
								}
							}
						}
					}
					.threeWrapper_btm{
						flex:1;
						overflow: hidden;
						display: flex;
						& > div + div{
							border-left: 1px solid #e3e5e4;
							box-sizing: border-box;
						}
						.threeWrapper_btmLeft{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							& > p{
								height: 40px;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 16px;
								border-bottom: 1px solid #e3e5e4;
								box-sizing: border-box;
							}
							& > ul{
								padding: 10px;
								box-sizing: border-box;
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > li + li{
									margin-top: 2px;
								}
								& > li{
									width: 100%;
									text-align: center;
									// border: 1px solid #e3e5e4;
									// padding: 5px 0;
									box-sizing: border-box;
									& > div{
										padding: 5px;
									}
								}
							}
						}
						.threeWrapper_btmRight{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							& > p{
								height: 40px;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 16px;
								border-bottom: 1px solid #e3e5e4;
								box-sizing: border-box;
							}
							& > ul{
								padding: 10px;
								box-sizing: border-box;
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > li + li{
									margin-top: 2px;
								}
								& > li{
									width: 100%;
									text-align: center;
									// border: 1px solid #e3e5e4;
									// padding: 5px 0;
									box-sizing: border-box;
									& > div{
										padding: 5px;
									}
								}
							}
						}
					}
				}
			}
			.four{
				flex:1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				.topTitle{
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #e3e5e4;
					box-sizing: border-box;
					& > p{
						font-size: 16px;
					}
				}
				.fourWrapper{
					flex:1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					& > div + div{
						border-top: 1px solid #e3e5e4;
						box-sizing: border-box;
					}
					.fourWrapper_top{
						flex:4;
						overflow: hidden;
						display: flex;
						& > div + div{
							border-left: 1px solid #e3e5e4;
							box-sizing: border-box;
						}
						.fourWrapper_topLeft{
							flex:1;
							overflow: hidden;
							& > p{
								height: 40px;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 16px;
							}
							& > ul{
								padding: 10px;
								padding-top: 0;
								box-sizing: border-box;
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > li + li{
									margin-top: 2px;
								}
								& > li{
									width: 100%;
									text-align: center;
									// border: 1px solid #e3e5e4;
									// padding: 5px 0;
									box-sizing: border-box;
									& > div{
										padding: 5px;
									}
								}
							}
						}
						.fourWrapper_topRight{
							flex:1;
							overflow: hidden;
							& > p{
								height: 40px;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 16px;
							}
							& > ul{
								padding: 10px;
								padding-top: 0;
								box-sizing: border-box;
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > li + li{
									margin-top: 2px;
								}
								& > li{
									width: 100%;
									text-align: center;
									// border: 1px solid #e3e5e4;
									// padding: 5px 0;
									box-sizing: border-box;
									& > div{
										padding: 5px;
									}
								}
							}
						}
					}
					.fourWrapper_btm{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						.topTitle{
							height: 40px;
							display: flex;
							justify-content: center;
							align-items: center;
							border-bottom: 1px solid #e3e5e4;
							box-sizing: border-box;
							& > p{
								font-size: 16px;
							}
						}
						.fourWrapper_btmWrapper{
							flex:1;
							overflow: hidden;
							display: flex;
							.fourWrapper_btmWrapper_left{
								flex:1;
								overflow: hidden;
								& > ul{
									padding: 10px;
									box-sizing: border-box;
									flex:1;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									align-items: center;
									& > li + li{
										margin-top: 2px;
									}
									& > li{
										width: 100%;
										text-align: center;
										// border: 1px solid #e3e5e4;
										// padding: 5px 0;
										box-sizing: border-box;
										& > div{
											padding: 5px;
										}
									}
								}
							}
							.fourWrapper_btmWrapper_right{
								flex:1;
								overflow: hidden;
								& > ul{
									padding: 10px;
									box-sizing: border-box;
									flex:1;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									align-items: center;
									& > li + li{
										margin-top: 2px;
									}
									& > li{
										width: 100%;
										text-align: center;
										// border: 1px solid #e3e5e4;
										// padding: 5px 0;
										box-sizing: border-box;
										& > div{
											padding: 5px;
										}
									}
								}
							}
						}
					}
				}
			}
	  }
	}
}
